import React, { useState } from 'react';
import { View, Text, Image, Textarea } from '@tarojs/components'
import './index.scss'
import icon1 from '../../assets/backpack.png'
import icon2 from '../../assets/tip.png'
import icon3 from '../../assets/reset.png'
import icon4 from '../../assets/balance.png'
const avatar = 'https://pzdsoss.pzds.com//im/20231101/14974e47_1698833412584.png'

const ListBox = ({ title, children }) => (
  <View className="list_box">
    <View className="list_title_box">
      <Text>{title}</Text>
      <Image src={icon2} />
    </View>
  </View>
)

const Creation = () => {
  const [tabs] = useState(['SD画室', 'DALL画室'])
  const [tabsIndex, setTabsIndex] = useState(0)
  // 关键词 positive：正向，negative：反向
  const [promptType, setPromptType] = useState('positive');
  const [prompt] = useState([{ title: '描述', type: 'positive' }, { title: '负向词', type: 'negative' }])
  // 风格预设
  const [style, setStyle] = useState(['无', '水墨', '电影', '漫画', '卡通'])
  const [styleTitle, setStyleTitle] = useState('无')
  // 纵横比
  const [aspectRatio, setAspectRatio] = useState({ list: ['1:1', '3:2', '2:3'], checked: 0 })
  return (
    <View className="Creation">
      <View className="header">
        {tabs.map((e, i) => <Text className={tabsIndex === i && 'active'} onClick={() => setTabsIndex(i)}>{e}</Text>)}
      </View>
      <View className="Creation_content">
        <View className="title_box">
          <Text>关键词</Text>
          <Image src={icon2} />
        </View>
        <View className="desc_box">
          <View className="desc_text">
            {prompt.map(e => <Text className={e.type !== promptType && 'active'} key={e.type} onClick={() => setPromptType(e.type)}>{e.title}</Text>)}
          </View>
          <View className="desc_area">
            <Textarea maxlength="1000" placeholder="请输入描述" />
            <View className="desc_area_btn">
              <Text>0 / 1000</Text>
              <Text>添加灵感</Text>
            </View>
          </View>
        </View>
        <View className="title_box">
          <Text>风格预设</Text>
          <Image src={icon2} />
        </View>
        <View className="style_box">
          {style.map(e => (
            <View key={e}>
              <Text>{e}</Text>
            </View>
          ))}
        </View>
        <ListBox title="咒语强度" />
        <ListBox title="纵横比" />
        <ListBox title="分辨率" />
        <ListBox title="数量" />
        <ListBox title="种子" />
        <ListBox title="步数" />
        <ListBox title="采样器" />


        <View className="placeholder_box"></View>
      </View>
      <View className="footer">
        <View className="footer_small_btn">
          <Image src={icon1} />
          <Text>背包</Text>
        </View>
        <View className="footer_big_btn">
          <Text>生成（消耗22</Text>
          <Image src={icon4} />
          <Text>）</Text>
        </View>
        <View className="footer_small_btn">
          <Image className="reset_icon" src={icon3} />
          <Text>重制</Text>
        </View>
      </View>
    </View>
  );
};

export default Creation;